<template>
  <div>
    <Title title="发布帖子"></Title>
    <!-- 帖子 -->
    <div class="post-msg">
      <!-- 帖子标题 -->
      <div class="post-title">
        标题：
        <el-input v-model="title" placeholder="请输入标题"></el-input>
      </div>
      <!-- 帖子内容 -->
      <div class="post-con">
        <!-- 正文内容 -->
        <el-input
          type="textarea"
          class="con"
          :autosize="{ minRows: 4}"
          placeholder="来吧，尽情发挥吧"
          v-model="intro"
        ></el-input>
        <!-- 上传 -->
        <el-upload
          class="avatar-uploader"
          action="http://59.111.92.205:8088/api/nos/upload/image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :with-credentials="true"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>

      <!-- 选择类型 -->
      <el-row>
        <el-button
          class="btn"
          type="success"
          plain
          v-for="(item,index) in categoryList"
          :key="index"
          @click="selectCategory(item.categoryId)"
        >{{item.name}}</el-button>
      </el-row>
      <!-- 发布 -->
      <el-button
        type="primary"
        class="publish"
        round
        @click="Publish()"
        v-loading.fullscreen.lock="fullscreenLoading"
      >
        发布
        <i class="el-icon-top el-icon--right"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
import Title from "../components/Title.vue";
import { getCategoryList, Publish } from "../api/luntan-api";

export default {
  created() {
    //获取分类
    getCategoryList().then(res => {
      this.categoryList = res.rows;
    });
  },
  components: {
    Title
  },
  data() {
    return {
      categoryList: [],
      imageUrl: "",
      imgSrc: "",
      categoryId: "",
      title: "",
      intro: "",
      msg: "",
      fullscreenLoading: false
    };
  },
  methods: {
    //选择类型
    selectCategory(categoryId) {
      this.categoryId = categoryId;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.url;
      this.imgSrc = URL.createObjectURL(file.raw);
      console.log(res.url);
      console.log(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isGIF = file.type === "image/gif";
      const isPNG = file.type === "image/png";
      const isBMP = file.type === "image/bmp";
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isJPG && !isGIF && !isPNG && !isBMP) {
        this.$message.error("上传头像图片只能是 JPG/GIF/PNG/BMP格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 10MB!");
      }
      return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
    },
    // 发布帖子
    Publish() {
      this.fullscreenLoading = true;
      setTimeout(() => {
        this.fullscreenLoading = false;
        Publish(this.categoryId, this.title, this.intro, this.imageUrl).then(
          res => {
            if (res.code == 0) {
              this.$notify({
                title: "帖子发布成功",
                //   message: '这是一条成功的提示消息',
                type: "success",
                position: "top-left",
                duration: 1500
              });
              // this.$router.push({path:'/'})
              this.categoryId = "";
              this.title = "";
              this.intro = "";
              this.imageUrl = "";
              this.$router.push({
                path: "/home"
              });
            } else {
              this.$notify.error({
                // title: "错误",
                message: res.msg,
                duration: 2000
              });
            }
          }
        );
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
.post-msg {
  //   margin-top: 10px;
  height: calc(100vh - 120px);
  overflow: scroll;
}
.post-con {
  width: 100%;
  margin: auto;
  overflow: hidden;
}
//富文本框无外边框
/deep/ .el-textarea__inner {
  border: none;
}
.post-title {
  width: 95%;
  text-align: left;
  margin-left: 10px;
  margin-top: 5px;
  border-bottom: 1px dotted black;
  padding-bottom: 10px;
  /deep/ .el-input {
    width: 70%;
    border: none;
  }
}

//上传头像
/deep/ .avatar-uploader .el-upload {
  border: none;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  float: left;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.publish {
  float: right;
  margin-right: 20px;
  margin-top: 20px;
}
.btn {
  float: left;
  margin: 10px;
}
</style>